import { createSlice } from '@reduxjs/toolkit';

import type { PayloadAction } from '@reduxjs/toolkit';

// 定义初始状态接口，描述应用的布局状态
interface InitialStateType {
	contentXScrollable: boolean; // 内容是否可横向滚动
	fullContent: boolean; // 是否全屏显示内容
	isMobile: boolean; // 是否为移动端布局
	mixSiderFixed: boolean; // 侧边栏是否固定
	reloadFlag: boolean; // 页面是否需要重新加载
	siderCollapse: boolean; // 侧边栏是否折叠
	themeDrawerVisible: boolean; // 主题抽屉是否可见
}

// 定义初始状态
const initialState: InitialStateType = {
	contentXScrollable: false,
	fullContent: false,
	/** 是否为移动端布局 */
	isMobile: false,
	mixSiderFixed: false,
	reloadFlag: false,
	siderCollapse: false,
	themeDrawerVisible: false
};

// 创建应用状态切片
export const appSlice = createSlice({
	initialState,
	name: 'app',
	reducers: {
		// 关闭主题抽屉
		closeThemeDrawer: state => {
			state.themeDrawerVisible = false;
		},
		// 打开主题抽屉
		openThemeDrawer: state => {
			state.themeDrawerVisible = true;
		},
		// 设置内容是否可横向滚动
		setContentXScrollable: (state, action: PayloadAction<boolean>) => {
			state.contentXScrollable = action.payload;
		},
		// 设置是否为移动端布局
		setIsMobile: (state, { payload }: { payload: boolean }) => {
			state.isMobile = payload;
		},
		// 设置侧边栏是否固定
		setMixSiderFixed: (state, action: PayloadAction<boolean>) => {
			state.mixSiderFixed = action.payload;
		},
		// 设置页面是否需要重新加载
		setReloadFlag: (state, action: PayloadAction<boolean>) => {
			state.reloadFlag = action.payload;
		},
		// 设置侧边栏是否折叠
		setSiderCollapse: (state, { payload }: PayloadAction<boolean>) => {
			state.siderCollapse = payload;
		},
		// 切换全屏显示内容状态
		toggleFullContent: state => {
			state.fullContent = !state.fullContent;
		},
		// 切换侧边栏固定状态
		toggleMixSiderFixed: state => {
			state.mixSiderFixed = !state.mixSiderFixed;
		},
		// 切换侧边栏折叠状态
		toggleSiderCollapse: state => {
			state.siderCollapse = !state.siderCollapse;
		}
	},
	selectors: {
		getContentXScrollable: app => app.contentXScrollable,
		getFullContent: app => app.fullContent,
		getIsMobile: app => app.isMobile,
		getMixSiderFixed: app => app.mixSiderFixed,
		getReloadFlag: app => app.reloadFlag,
		getSiderCollapse: app => app.siderCollapse,
		getThemeDrawerVisible: app => app.themeDrawerVisible
	}
});
// Action creators are generated for each case reducer function.
export const {
	closeThemeDrawer,
	openThemeDrawer,
	setContentXScrollable,
	setIsMobile,
	setMixSiderFixed,
	setReloadFlag,
	setSiderCollapse,
	toggleFullContent,
	toggleMixSiderFixed,
	toggleSiderCollapse
} = appSlice.actions;

// Selectors returned by `slice.selectors` take the root state as their first argument.
export const {
	getContentXScrollable,
	getFullContent,
	getIsMobile,
	getMixSiderFixed,
	getReloadFlag,
	getSiderCollapse,
	getThemeDrawerVisible
} = appSlice.selectors;
